import React, {useState, useEffect} from 'react'
import axios from 'axios';

const DogShow = () => {
    const [url, setUrl] = useState('');
    const [loading, setLoading] = useState(false);
    const [fetch, setFetch] = useState(false);
    const style = {
        width: 200
    };

    useEffect(() => {
        setLoading(true);
        axios.get('https://dog.ceo/api/breeds/image/random').then(resulet => {
            console.log(resulet);
            setUrl(resulet.data.message);
            setLoading(false);
        })
    }, [fetch]);

    return (
        <>
            <div>
                {
                    loading
                        ? <p>狗狗读取中</p>
                        : <img src={url} alt='dog' style={style}/>

                }
            </div>
            <div>
                <button onClick={() => { setFetch(!fetch) }}>
                    下一张
                </button>
            </div>
        </>
    )
};

export default DogShow;
